<template>
    <div id="bar1">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        async echartsInit() {
            await this.$axios({
                url: 'count/floor',
                method: 'get'
            }).then(({ data }) => {
                if (data.code == 200) {
                    echarts.init(document.getElementById('bar1')).setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {},
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            splitLine: { show: false },
                            boundaryGap: [0, 0.01],
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: ['一楼', '二楼', '三楼', '四楼', '五楼'],
                            splitLine: { show: false },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                data: [data.data['1层'], data.data['2层'], data.data['3层'], data.data['4层'], data.data['5层'], data.data['2层']],
                                label: {
                                    color: '#fff',
                                },
                            }
                        ]
                    })
                } else {
                    echarts.init(document.getElementById('bar1')).showLoading();
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
#bar1 {
    width: 90%;
    height: 90%;
    margin-top: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>